<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<title>UI Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link type="text/css" rel="stylesheet" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
		<link type="text/css" rel="stylesheet" href="css/index3.css" />
		<link type="text/css" rel="stylesheet" href="css/powerFloat.css" />
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
		
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery-powerFloat-min.js"></script>
		<script type="text/javascript" src="js/jquery.overlay.js"></script>
		<script type="text/javascript" src="js/galleria-1.2.6.js"></script>
		<script type="text/javascript" src="js/jquery.jqDock.js"></script>
		
		
		<script type="text/javascript">
			var winheight;
			var winwidth;
			
			

			$(document).ready(function() {
				refreash();
				$(window).resize(function() {
					refreash();
				});
				var dockOptions = { 
					align: 'top',
					labels: true,
					size: 48
				};
				$('#menu').jqDock(dockOptions);

				$(".component").hide();
				$("#component0").addClass("isShow");
				$("#component0").show();
				//showComponent("component0");

				$("div").disableSelection();

			});

			

			
			function refreash(){
				
				winheight = $(window).height();
				winwidth = $(window).width();
				$("body").css("height",winheight);
				$("#bodydiv").css("height",winheight);
				$("#content").css("height",winheight);

				var componentW = winwidth/3;
				var componentH = winheight*2/3;
				$(".component").css("width",componentW);
				$(".component").css("height",componentH);
				
				$(".component").find(".middle1").css("width",componentW-17);
				$(".component").find(".middle2").css("width",componentW-7);
				$(".component").find(".bottomborder").css("width",componentW-9);
				$(".component").find(".middle2").css("height",componentH-80);


			}

			function showComponent(objid){
				$(".isShow").hide("fade", null, 300, function(){
					$(this).removeClass("isShow");
					
					$("#"+objid).show("fade", null, 300,function(){
						$(this).addClass("isShow");
					});
				});

				
			}
			
		
		</script>
	</head>

	<body>
		<div id="bodydiv" class="bodydiv">
			
			<div class="page" id="page" >
				<div id="menu" class="menu">
					<img src="image/icon/png-0055.png" onclick="showComponent('component0');" title="推荐" />
					<img src="image/icon/png-0073.png" onclick="showComponent('component1');" title="新闻" />
					<img src="image/icon/png-0001.png" onclick="showComponent('component2');" title="音乐" />
					<img src="image/icon/png-0072.png" onclick="showComponent('component3');" title="小说" />
					<img src="image/icon/png-0067.png" onclick="showComponent('component4');" title="通讯录" />
					<img src="image/icon/png-0081.png" onclick="showComponent('component5');" title="地图" />
					<img src="image/icon/png-0091.png" onclick="showComponent('component6');" title="便签" />
					<img src="image/icon/xiaoxin.png" onclick="showComponent('component7');" title="漫画" />
					<img src="image/icon/png-0069.png" onclick="showComponent('component8');" title="视频" />
				</div>
			</div>
			<div id="content" class="content">
				<div class="component" id="component0">
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0055.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							
							<img class="showimg" title="缩放" cid="component0" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" />
							<img class="reloadimg" title="刷新" cid="component0" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="compents/news/normal.html"></iframe>
						</div>
						
					</div>
				</div>
				<div class="component" id="component1">
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0073.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							
							<img class="showimg" title="缩放" cid="component1" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" />
							<img class="reloadimg" title="刷新" cid="component1" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="compents/news/normal.html"></iframe>
						</div>
						
					</div>
				</div>
				<div id="component2" class="component" url1="transparentBody.html" url2="http://www.baidu.com" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0001.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component2" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component2" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						<div class="leftborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="transparentBody.html"></iframe>
						</div>
						<div class="rightborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class">
						<div class="bottomborder" style="background:#dbdbdb;height:1px;"></div>
					</div>
					
					
				</div>
				<div id="component3" class="component" url1="compents/book/normal.html" url2="compents/book/main.html" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0072.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component3" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component3" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="compents/book/normal.html"></iframe>
						</div>
						
					</div>
					
					
				
				</div>
				<div id="component4" class="component" url1="transparentBody.html" url2="http://www.baidu.com" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0067.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component4" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component4" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						<div class="leftborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="transparentBody.html"></iframe>
						</div>
						<div class="rightborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class">
						<div class="bottomborder" style="background:#dbdbdb;height:1px;"></div>
					</div>
					
				
				</div>
				<div id="component5" class="component" url1="compents/map/normal.html" url2="compents/map/main.html">
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0081.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component5" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component5" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						<div class="leftborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="compents/map/normal.html"></iframe>
						</div>
						<div class="rightborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class">
						<div class="bottomborder" style="background:#dbdbdb;height:1px;"></div>
					</div>
				
				</div>
				<div id="component6" class="component" url1="transparentBody.html" url2="http://www.baidu.com" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0091.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component6" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component6" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						<div class="leftborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="transparentBody.html"></iframe>
						</div>
						<div class="rightborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class">
						<div class="bottomborder" style="background:#dbdbdb;height:1px;"></div>
					</div>
				
				</div>
				<div id="component7" class="component" url1="compents/comic/normal.html" url2="compents/comic/main.html" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/xiaoxin.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component7" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component7" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="compents/comic/normal.html"></iframe>
						</div>
						
					</div>
					
				
				</div>
				<div id="component8" class="component" url1="transparentBody.html" url2="http://www.baidu.com" >
					<div style="width:100%;float:left;" class="transparent_class">
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
						<div class="middle1" style="background:url(image/index/bg-1.png) repeat-x 0px 30px;width:296px;height:30px;float:left;padding-top:30px;">
							<img src="image/icon/png-0069.png" style="width:64px;height:64px;float:leftt;padding-left:15px;margin-top:-30px;cursor:pointer;" /> 
							<img class="showimg" title="缩放" cid="component8" src="image/index/show.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
							<img class="reloadimg" title="刷新" cid="component8" src="image/index/reload.png" style="width:24px;height:23px;float:right;padding-right:5px;padding-top:4px;cursor:pointer;" /> 
						</div>
						<div style="background:url(image/index/bg-1.png) no-repeat 0px 30px;width:5px;height:30px;float:left;padding-top:30px;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class2">
						<div class="leftborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
						<div class="middle2" style="width:300px;height:280px;float:left;">
							<iframe style="width:100%;height:100%;" class="showframe"  allowtransparency=”true” scrolling="no" frameBorder="0" src="transparentBody.html"></iframe>
						</div>
						<div class="rightborder" style="background:#dbdbdb;width:1px;height:280px;float:left;"></div>
					</div>
					<div style="width:100%;float:left;" class="transparent_class">
						<div class="bottomborder" style="background:#dbdbdb;height:1px;"></div>
					</div>
				
				</div>
			</div>
			
		</div>
	</body>
</html>